<template>
  <div>
    <h1>Home</h1>
    <div class="title">
      <RouterLink to="/about">关于</RouterLink>
      <RouterLink to="/news">新闻</RouterLink>
    </div>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "Home",
};
</script>
<script setup lang="ts">
import { RouterLink, RouterView } from "vue-router";
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  // justify-content: center;
  // align-items: center;
  border: 1px solid red;
  height: calc(100vh - 300px); /* 可选：限制高度，避免溢出 */
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  background-color: #f5f5f5;
}
</style>
